* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Segoe UI, Tahoma, Geneva, Verdana, sans-serif;
}

@font-face {
  font-family: 'Remilia Thin';
  src: url('fonts/remilia-elegant-thin.woff2') format('woff2'),
       url('fonts/remilia-elegant-thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

:root,
body[data-theme="light"] {
  --firstheader-bgcolor: #131921;
  --secondheader-bgcolor: #232f3e;
  --footersect3-bgcolor: #131a22;
}


#logo {
  max-width: 75px;
  max-height: 75px;
}

#footer_logo {
  max-width: 75px;
  max-height: 75px;
}
.currency {
  max-width: 75px;
  max-height: 75px;
}
.language {
  max-width: 75px;
  max-height: 75px;
}

img {
  max-width: 300; /* Added 'px' here */
  max-height: 300;
}

main {
  /*background-image: url('your-image.jpg');*/
  /* Fallback color for older browsers */
  background-color: #D21404; 
  
  /* Modern linear-gradient:
     - to bottom: dictates the direction from top to bottom
     - #D21404 0%: starts solid red at the very top
     - #e3e6e6 20%: transitions completely into your custom gray/white by 20% height
  */
  background: linear-gradient(to bottom, #D21404 0%, #e3e6e6 20%);
}


body {
  background-color: #f4f7f6;
  min-height: 100vh;
}

.ninecardslines{
  display: grid;
  /* Automatically creates columns that are at least 300px, but split evenly */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 20px;             /* Clean spacing between cards */
  justify-content: center; /* Centers the grid itself if it doesn't span full width */
  align-items: start;    /* Prevents cards from stretching vertically unevenly */
  max-width: 1200px;     /* Optional: keeps the grid from getting too wide on massive screens */
  margin: 0 auto;        /* Perfectly centers the entire container on the page */
}

/* Card Container */
.ninecards-card {
  background-color: #ffffff; 
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); 
  max-width: 350px;
  width: 100%;
  cursor: pointer;
  /* FIX: Use Flexbox instead of inline-block */
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensures all cards in a grid row stretch to match heights */
  
  /* FIX: Removed max-height: 400px so the card can grow to fit text */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Interaction Effect */
.ninecards-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* Card Image */
.ninecardsimg {
  width: 100%;
  height: 250px; 
  object-fit: contain; 
  display: block;
  background-color: #ffffff; 
  padding: 10px; /* Optional: Gives the product a little breathing room from the edges */
}

/* Card Content Area */
.ninecards-content {
  padding: 24px;
  background-color: #ffffff; 
  /* FIX: Tells the text container to expand and fill any remaining 
     vertical space, keeping the layout neat */
  flex-grow: 1; 
}
.ninecards-title {
  font-size: 1.4rem;
  color: #1a1a1a; /* Bright white for high readability */
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 600;
}

.ninecards-description {
  font-size: 0.95rem;
  color: #1a1a1a; /* Crisp, light silver-gray for readable body text */
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Card Action Button */
.ninecards-btn {
  display: inline-block;
  width: 100%;
  box-sizing: border-box; /* Fixes potential button width overflow bugs */
  padding: 12px;
  background-color: #3182ce;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.ninecards-btn:hover {
  background-color: #2b6cb0;
}


.main_navbtn {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  color: aliceblue;
  font-size: 0.8em;
  border-radius: 3px;
  cursor: pointer;
  /* Set an initial transparent border of the same width so the button 
     doesn't "jump" or resize when the border appears */
  border: 1px solid transparent; 
  
  padding: 6px 2.5px;
  margin: 2.5px;
  background-color: var(--secondheader-bgcolor);
  
  /* Fix: Changed 'transform' to 'transition' */
  transition: border 0.2s ease;
}

.main_navbtn:hover {
  /* This makes the border appear */
  border: 1px solid white; 
}

.navimg {
  max-width: 12px;
  max-height: 12px;
}

.slidercards{
  display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center;     /* Centers vertically */
}

/* Card Container */
.slidercards-card {
  background-color: #1a202c; /* Swapped to a deep slate black for better contrast */
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); /* Stronger shadow so it pops on dark themes */
  max-width: fit-content;
  width: 100%;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Interaction Effect */
.slidercards-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}


.slider {
  display: flex;
  cursor: pointer;
  transition: transform 0.5s ease-in-out; /* Smooth sliding transition */
}

.slide {
  min-width: 100%; /* Ensures each image takes up the full container width */
}

/* Card Image */
.slidercardsimg {
  width: 100%;
  min-width: 100%;
  height: 500px;
  object-fit: cover;
  display: block;
}

.slidenav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  cursor: pointer;
  padding: 10px;
}
#prev { left: 10px; transition: transform 0.3s ease }
#next { right: 10px; transition: transform 0.3s ease }



/* 1. Lay the columns out side-by-side */
.footersect-1 {
  display: flex;
  justify-content: space-between; /* Spreads columns evenly across the width */
  gap: 20px;                     /* Adds spacing between columns if they get close */
  max-width: 1200px;
  margin: 0 auto;                /* Centers the footer content on large screens */
  background-color: var(--secondheader-bgcolor);
}

/* Allow columns to grow and shrink equally */
.footer-column {
  flex: 1; 
}

/* 2. Strip the default list styling */
.footer-column ul {
  list-style: none; /* Removes dots/numbers */
  padding: 0;       /* Removes default browser indentation */
  margin: 0;
}

/* Optional: Subtle spacing for links */
.footer-column li {
  margin-bottom: 8px;
}

.footer-column a {
  text-decoration: none;
  color: #333;
}

.footersect-2 {
  gap: 20px;
  padding: 20px 10%;
  border-top: 1px solid #3a4553;
  border-bottom: 1px solid #3a4553;
}

.footersect-2 button {
  display: flex;
  align-items: center;
  gap: 10px;
  background-color: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border */
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.footersect-2 button:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Slight highlight on hover */
}

/* Styles the dropdown select box */
.footersect-2 select {
  padding: 8px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.footersect-3 {
  display: flex;
  justify-content: space-between; /* Spreads columns evenly across the width */
  gap: 20px;                     /* Adds spacing between columns if they get close */
  max-width: 1200px;
  margin: 0 auto;                /* Centers the footer content on large screens */
  background-color: var(--footersect3-bgcolor);
}


.footersect-1, .footersect-2, .footersect-3 {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: none; 
  padding: 40px 10%; /* Gives internal padding while spanning 100% width */
}

/* --- 3. Fix Footer Text Contrast --- */
.footer-column h3, .footer-element p.header-p {
  color: #ffffff; /* Bright white headers */
  margin-bottom: 15px;
}

/* --- 3. Fix Footer Text Contrast --- */
.footer-column h3, .footer-element p.header-p {
  color: #ffffff; /* Bright white headers */
  margin-bottom: 15px;
}

.footer-column a, .footer-element a {
  text-decoration: none;
  color: #cccccc; /* Light gray for readable links */
  transition: color 0.2s;
}

.footer-column a:hover, .footer-element a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* --- 6. Remove Footer Button Borders --- */
.footersect-2 button, .footersect-2 select {
  border: none; /* Strips borders */
  outline: none;
  background-color: transparent;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- 2. Center Copyright --- */
footer p.copyright {
  text-align: center;
  padding: 20px 0;
  margin: 0;
  color: #cccccc;
  background-color: var(--footersect3-bgcolor);
}

.header-p {
  color:aquamarine;
}

.footer-element {
  flex: 1; 
}

/* 2. Strip the default list styling */
.footer-element ul {
  list-style: none; /* Removes dots/numbers */
  padding: 0;       /* Removes default browser indentation */
  margin: 0;
}

/* Optional: Subtle spacing for links */
.footer-element li {
  margin-bottom: 8px;
}

.footer-element a {
  text-decoration: none;
  color: #333;
}

.backtotop {
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  background-color: #37475a; 
  color: white;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.backtotop:hover {
  background-color: #475a6f;
}



.search-form {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 420px;
  height: 40px;
  border: none;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  box-sizing: border-box;
  transform: border 0.3s ease;
}

.search-form:focus{
  border: 2px solid #febd69;
}

.search-category {
  width: 58px;
  border: none;
  border-right: 1px solid #cdcdcd;
  background: #f3f3f3;
  color: #111;
  font-size: 13px;
  padding: 0 6px;
  outline: none;
  cursor: pointer;
}

#site-search {
  flex: 1;
  border: none;
  outline: none;
  font-size: 15px;
  padding: 0 12px;
  min-width: 0;
}

#site-search::placeholder {
  color: #767676;
  opacity: 1;
}

#searchsubmitbtn {
  width: 50px;
  border: none;
  background: #febd69;
  color: #111;
  font-size: 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#searchsubmitbtn:hover {
  background: #f3a847 ;
}

.search-form:focus-within {
  box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.25);
}

.firstheader {
  display: flex;
  justify-content: space-between; /* Pushes left and right sections apart */
  align-items: center;
  padding: 10px 20px;
  background-color: var(--firstheader-bgcolor);
}

.header-left, .header-right {
  display: flex;
  align-items: center;
  gap: 15px; /* Clean spacing between buttons/search */
}

.header-left button, 
.header-right button {
  border: none;
  border-radius: 2px;
  background-color: var(--firstheader-bgcolor);
  outline-offset: -1px;
  color: white;
  cursor: pointer; 
  padding: 5px; /* Adds a little breathing room inside the button */
}

.header-left button:hover, 
.header-right button:hover {
  outline: 1px solid white;
  background-color: var(--firstheader-bgcolor);
}

/* Optional: Removes the inner background of the cart SVG itself if it has one */
#cart {
  max-width: 40px;
  max-height: 40px;
  background-color: transparent; 
  border: none;
  display: block; /* Removes weird spacing below images */
}

.page-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5); /* 50% black tint */
  opacity: 0;
  pointer-events: none; /* Allows clicking through it when hidden */
  transition: opacity 0.3s ease; /* Smooth fade effect */
  z-index: 10; /* Sits above content, but below the dropdown */
}

#langflag {
  max-width: 3vb;
  max-height: 3vh;
}

.droptrigger1{
  border: none;
  border-radius: 2px;
  background-color: var(--firstheader-bgcolor);
  outline-offset: -1px;
  color: white;
  margin: 3px;
  padding: 3px;
}

.droptrigger1:hover{
  outline: 1px solid white;
  background-color: var(--firstheader-bgcolor);
}

.returnsorders{
  border: none;
  border-radius: 2px;
  background-color: var(--firstheader-bgcolor);
  outline-offset: -1px;
  color: white;
  margin: 3px;
  padding: 3px;
}

.returnsorders:hover{
  outline: 1px solid white;
  background-color: var(--firstheader-bgcolor);
}



.searchsubmitbtn {
  border: none;
  background-color: var(--firstheader-bgcolor);
}

.secondheader {
  background-color: var(--secondheader-bgcolor);
}

.secondheader > nav > button{
  border: none;
  border-radius: 2px;
  background-color: var(--secondheader-bgcolor);
  outline-offset: -1px;
  color: white;

}

.secondheader > nav > button:hover{
  outline: 1px solid white;
  background-color: var(--secondheader-bgcolor);
}

.thenav {
  display: flex;             /* Enables Flexbox */
  justify-content: center;   /* Centers buttons horizontally */
  align-items: center;       /* Aligns buttons vertically in the center */
  gap: 10px;                 /* Adds space between your buttons */
  flex-wrap: wrap;           /* Allows buttons to wrap to the next line if the screen is too small */
  padding: 5px 0;           /* Adds breathing room top and bottom */
}

.headernavbtn {
  border: none;
  background-color: var(--secondheader-bgcolor);
  font-weight: normal; 
  border: none; 
  background: none;
  padding: 5px;
  margin: 5px;
}

.headernavbtn > p {
  font-family: 'Remilia Thin', Georgia, serif;
  font-weight: 100;
  color: aliceblue;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  line-height: 1.2;
}

.headerddcontent1 {
  display: none;
  opacity: 0;
  width: 320px;
  background-color: aliceblue;
  border-radius: 12px;
  overflow: hidden;
  position: absolute; /* Removes from normal document flow */
  top: 100%;          /* Appears directly below the parent */
  left: 0;
  z-index: 10;        /* Sits on top of other elements */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  transition: opacity 0.3s ease, display 0.3s ease; /* Smooth fade-in effect */
}


.body:has(.droptrigger1:hover) .headerddcontent1 {
  display: block;
  opacity: 1;
}




.product-card-lines{
  display: grid;
  /* Automatically creates columns that are at least 300px, but split evenly */
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
  gap: 20px;             /* Clean spacing between cards */
  justify-content: center; /* Centers the grid itself if it doesn't span full width */
  align-items: start;    /* Prevents cards from stretching vertically unevenly */
  max-width: 1200px;     /* Optional: keeps the grid from getting too wide on massive screens */
  margin: 0 auto;        /* Perfectly centers the entire container on the page */
}

/* Card Container */
.product-card {
  background-color: aliceblue; 
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); 
  max-width: 350px;
  width: 100%;
  cursor: pointer;
  /* FIX: Use Flexbox instead of inline-block */
  display: flex;
  flex-direction: column;
  height: 100%; /* Ensures all cards in a grid row stretch to match heights */
  
  /* FIX: Removed max-height: 400px so the card can grow to fit text */
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover Interaction Effect */
.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

/* Card Image */
.product-card-img {
  width: 100%;
  height: 250px; 
  object-fit: contain; 
  display: block;
  background-color: #ffffff; 
  padding: 10px; /* Optional: Gives the product a little breathing room from the edges */
}

/* Card Content Area */
.product-card-content {
  padding: 24px;
  background-color: #ffffff; 
  /* FIX: Tells the text container to expand and fill any remaining 
     vertical space, keeping the layout neat */
  flex-grow: 1; 
}
.product-card-title {
  font-size: 1.4rem;
  color: #1a1a1a; /* Bright white for high readability */
  margin-top: 0;
  margin-bottom: 12px;
  font-weight: 600;
}

.product-card-description {
  font-size: 0.95rem;
  color: #1a1a1a; /* Crisp, light silver-gray for readable body text */
  line-height: 1.5;
  margin-bottom: 20px;
}

/* Card Action Button */
.product-card-btn {
  display: inline-block;
  width: 100%;
  box-sizing: border-box; /* Fixes potential button width overflow bugs */
  padding: 12px;
  background-color: #f3e34f;
  color: #000000;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.product-card-btn:hover {
  background-color: #c2b544;
}

.category-bar {
  width: 250px; /* Fixed width for the sidebar */
  flex-shrink: 0; /* Prevents the sidebar from getting squished */
  background: rgba(255, 255, 255, 0.9); /* Slight white background so it's readable over gradient */
  padding: 20px;
  border-radius: 8px;
}

.browse_mode {
  display: flex;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  align-items: flex-start; /* Prevents sidebar from stretching infinitely downwards */
}

#category-search-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.products-container {
  flex-grow: 1; /* Takes up the remaining right side space */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
}

/* Category List Styles */
#category-list {
  list-style: none;
}

.category-item {
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 1px solid #eee;
  transition: color 0.2s;
}

.category-item:hover {
  color: #007185; /* Amazon blue hover effect */
  font-weight: bold;
}


/* --- Language Modal Styles --- */
.headerdropdown {
  position: relative; /* Acts as the anchor for the absolute modal */
  z-index: 20;
}

.language-modal {
  display: none;
  position: absolute;
  top: 45px; /* Pushes it below the header button */
  left: -50px; 
  width: 250px;
  background-color: white;
  color: black;
  border-radius: 4px;
  padding: 15px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  z-index: 1000; /* Ensures it sits above the dark page overlay */
  text-align: left;
  cursor: default;
}

/* The little upward pointing arrow */
.modal-arrow {
  position: absolute;
  top: -10px;
  left: 70px;
  border-width: 0 10px 10px 10px;
  border-style: solid;
  border-color: transparent transparent white transparent;
}

/* Show the modal when hovering over the container */
.headerdropdown:hover .language-modal {
  display: block;
}

/* Inner Modal Styling */
.modal-section { margin-bottom: 10px; }
.modal-title { font-size: 14px; margin-bottom: 10px; }
.modal-link {
  color: #007185;
  text-decoration: none;
  font-size: 12px;
  float: right;
}
.modal-link:hover { text-decoration: underline; color: #c45500; }

.lang-radio {
  display: block;
  font-size: 14px;
  margin-bottom: 8px;
  cursor: pointer;
}
.lang-radio input {
  margin-right: 8px;
  accent-color: #e77600; /* Amazon orange radio button style */
}

.modal-divider {
  border: 0;
  border-top: 1px solid #ddd;
  margin: 10px 0;
}
.currency-display { display: flex; justify-content: space-between; font-size: 14px; }
.shopping-region { font-size: 14px; display: flex; align-items: center; gap: 5px; }